<template>
  <div class="login">
    <el-row>
      <el-col :span="24" class="login-container-right">
        <div>
          <div class="title-container">
            <div class="login-container">
              <!-- 登陆 -->
              <div v-if=" isShowItem == 1 " class="login-container1">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="right">
                  <div class="title-container">
                    <h5 class="title">正版软件及信息化资产管理系统</h5>
                  </div>
                  <el-form-item prop="username">
                    <!-- <span class="svg-container">
                        <svg-icon icon-class="user" />
                      </span> -->
                    <el-input
                      ref="username"
                      v-model="loginForm.username"
                      size="mini"
                      prefix-icon="login_password"
                      placeholder="请输入用户名"
                      name="username"
                      type="text"
                      tabindex="1"
                      auto-complete="on"
                    />
                    <span class="el-input__prefix">
                      <svg-icon icon-class="login_account" />
                    </span>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      :key="passwordType"
                      ref="password"
                      v-model="loginForm.password"
                      prefix-icon="login_password_high"
                      :type="passwordType"
                      placeholder="请输入密码"
                      name="password"
                      tabindex="2"
                      auto-complete="on"
                      size="mini"
                      @keyup.enter.native="handleLogin"
                    />
                    <span class="el-input__prefix">
                      <svg-icon icon-class="login_password" />
                    </span>
                    <span class="show-pwd" @click="showPwd">
                      <img v-if="passwordType === 'password'" src="../../assets/icons_slices/ico_login_eye.png">
                      <img v-else src="../../assets/icons_slices/ico_login_eye_high.png">
                      <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
                    </span>
                  </el-form-item>
                  <el-row style="padding:0 0 20px 0px">
                    <el-row style="padding: 0px">
                      <!-- <el-col :span="12" style="text-align: left">
                        <el-checkbox v-model="AutoLogin"><a>下次自动登录</a></el-checkbox>
                      </el-col> -->
                      <el-col :span="12" :offset="12" style="color: #3a8ee6; text-align: right"><a
                        href="http://10.10.10.11:9006/upload/nsbd.exe"
                      >下载辅助程序</a>
                      </el-col>

                    </el-row>
                  </el-row>
                  <div style="width:100%;text-align: center;">
                    <el-button
                      :loading="loading"
                      type="primary"
                      style="width:100%;font-size: 18px;padding-left: 30px"
                      @click.native.prevent="handleLogin"
                    >&nbsp;登&nbsp;录<i class="el-icon-right" style="padding-left: 30px" /></el-button>
                  </div>
                  <el-row style="padding:10px 10px">
                    <el-row>
                      <el-col :span="24"><el-button
                        type="text"
                        style="width:150px;"
                        @click="isShowItemChange(2)"
                      >找回密码</el-button>
                      </el-col>
                      <!-- <el-button type="text"><a
                          href="http://10.10.10.11:9006/upload/softinstall.zip"
                        ><em>下载客户端</em></a></el-button>
                        <h3>温馨提示</h3>
                        <p style="padding-left:30px">登录系统前,客户端必须安装并运行.
                        </p> -->
                      <!-- <img src="../../assets/icons_slices/ico login_password.png"> -->
                      <!-- <el-image src="../../assets/icons_slices/ico login_password.png" /> -->
                      <!-- <el-image :src="circleUrl" /> -->
                      <!-- <el-col span="4"><svg-icon icon-class="weixi" class="lager" /></el-col> -->
                      <!-- <el-col span="4" offset="16"><svg-icon icon-class="phone" class="lager" /></el-col> -->
                    </el-row>
                  </el-row>
                </el-form>
              </div>
              <!-- 找回密码-->
              <div v-if=" isShowItem == 2 " class="login-container2">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="right">
                  <span style="cursor: pointer;" @click="isShowItemChange(1)"><i
                    class="el-icon-arrow-left"
                    style="cursor: pointer;"
                  >返回登陆</i></span>
                  <div class="">
                    <p class="title">找回密码</p>
                  </div>
                  <el-form-item prop="username">
                    <!-- <span class="svg-container">
                        <svg-icon icon-class="user" />
                      </span> -->
                    <el-input
                      ref="username"
                      v-model="loginForm.username"
                      size="mini"
                      prefix-icon="login_password"
                      placeholder="请输入账号"
                      name="username"
                      type="text"
                      tabindex="1"
                      auto-complete="on"
                    />
                    <span class="el-input__prefix">
                      <svg-icon icon-class="login_account" />
                    </span>
                  </el-form-item>
                  <el-form-item>
                    <!-- <span class="svg-container">
                        <svg-icon icon-class="user" />
                      </span> -->
                    <el-input
                      ref="username"
                      v-model="loginForm.phone"
                      size="mini"
                      prefix-icon="el-icon-user"
                      placeholder="请输入用户名"
                      name="username"
                      type="text"
                      tabindex="1"
                      maxlength="11"
                      auto-complete="on"
                    />
                  </el-form-item>
                  <!-- <el-form-item prop="username"> -->
                  <!-- <el-row style="background: transparent;">
                    <el-col span="10">
                      <el-input
                        ref="username"
                        v-model="loginForm.smsCode"
                        size="mini"
                        placeholder="请输入验证码"
                        name="username"
                        type="text"
                        tabindex="1"
                        auto-complete="on"
                        style="width: 130px"
                      /></el-col>
                    <el-col :span="10">
                      <el-button
                        size="mini"
                        plain
                        @click="smsSend"
                      >
                        发送验证码
                      </el-button>
                    </el-col>
                  </el-row> -->
                  <!-- </el-form-item> -->
                  <div style="width:100%;text-align: center;">
                    <el-button
                      :loading="loading"
                      type="primary"
                      style="width:100%;font-size: 18px;padding-left: 30px;margin-top:10px"
                      @click="checkSmsCode"
                    >申请密码重置</el-button>
                  </div>
                </el-form>
              </div>
              <!-- 修改密码 -->
              <div v-if=" isShowItem == 3 " class="login-container3">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="right">
                  <div class="login-container">
                    <h3 class="title">设置密码</h3>
                  </div>
                  <el-form-item prop="password">
                    <el-input
                      :key="passwordType"
                      ref="password"
                      v-model="loginForm.password"
                      prefix-icon="login_password_high"
                      :type="passwordType"
                      placeholder="请输入新密码"
                      name="password"
                      tabindex="2"
                      auto-complete="on"
                      size="mini"
                      @keyup.enter.native="handleLogin"
                    />
                    <span class="el-input__prefix">
                      <svg-icon icon-class="login_password" />
                    </span>
                    <span class="show-pwd" @click="showPwd">
                      <img v-if="passwordType === 'password'" src="../../assets/icons_slices/ico_login_eye.png">
                      <img v-else src="../../assets/icons_slices/ico_login_eye_high.png">
                      <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
                    </span>
                  </el-form-item>
                  <el-form-item prop="passwordC">
                    <el-input
                      :key="passwordType"
                      ref="password"
                      v-model="loginForm.passwordC"
                      prefix-icon="login_password_high"
                      :type="passwordType"
                      placeholder="请输入确认密码"
                      tabindex="2"
                      auto-complete="on"
                      size="mini"
                      @keyup.enter.native="handleLogin"
                    />
                    <span class="el-input__prefix">
                      <svg-icon icon-class="login_password" />
                    </span>
                    <span class="show-pwd" @click="showPwd">
                      <img v-if="passwordType === 'password'" src="../../assets/icons_slices/ico_login_eye.png">
                      <img v-else src="../../assets/icons_slices/ico_login_eye_high.png">
                      <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
                    </span>
                  </el-form-item>
                  <el-button
                    :loading="loading"
                    type="primary"
                    style="width:100%;font-size: 18px;padding-left: 30px"
                    @click.native.prevent="findPassword"
                  >&nbsp;确定&nbsp;</el-button>
                </el-form></div>
              </el-form>
            </div>

          </div>
          <!-- <img class="title" src="../../assets/icons_slices/img_login_logo.png" fit="cover"> -->
        </div>
      </el-col></el-row></div>
  </el-col>
  </el-row>

  </div>

</template>

<script>
import { validUsername } from '@/utils/validate'
import { applyResetpassword } from '../../api/message'
import { login, smsSend, findPassword } from '../../api/user'
import { getMachineCode, setMachineCode, removeMachineCode } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码最少六位'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (value.length < 11) {
        callback(new Error('密码最少11位'))
      } else {
        callback()
      }
    }
    const validatePasswordC = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码最少六位'))
      } else if (value != this.loginForm.password) {
        callback(new Error('前后密码不一致'))
      } else {
        callback()
      }
    }
    return {
      loading1: false,
      isShowItem: 1,
      AutoLogin: false,
      circleUrl: '/assets/icons_slices/ico login_password.png',
      backamge: '../../assets/icons_slices/img_login_bg.png',
      loginForm: {
        username: '',
        password: '',
        passwordC: '',
        phone: '',
        smsCodeC: '',
        smsCode: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername },
          { min: 2, max: 16, message: '长度在 2 到 16个字符', trigger: 'change' }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        passwordC: [{ required: true, trigger: 'blur', validator: validatePasswordC }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    checkSmsCode() {
      // console.log(this.loginForm)
      if (this.loginForm.username == '') {
        this.$message.warning('请先输入账号')
      } else if (this.loginForm.phone == '') {
        this.$message.warning('请先输入用户名')
      } else {
        if (!this.loginForm.phone) {
          // this.$message.warning('请先输入正确的11位手机号')
        } else {
          this.loading1 = true
          applyResetpassword({
            phone: this.loginForm.phone,
            userName: this.loginForm.username
          }).then(res => {
            if (res.code === 200) {
              this.loading1 = false
              this.$message.success('密码重置申请成功')
            }
          }).catch(() => {
            this.loading1 = false
          })
        }
      }
      // if (this.loginForm.phone === '') {
      //   this.$message.warning('请先输入手机号')
      // } else if (this.loginForm.smsCodeC && this.loginForm.smsCode === this.loginForm.smsCodeC) {
      //   this.isShowItem = 3
      // } else {
      //   this.$message.warning('验证码校验失败，请重试!')
      // }
    },
    isShowItemChange(params) {
      this.isShowItem = params
    },
    findPassword() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          findPassword({
            password: this.loginForm.password,
            userName: this.loginForm.username
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('设置成功')
              this.isShowItem = 1
            } else {
              this.$message.warning('设置失败')
            }
          })
        }
      })
    },
    smsSend() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          smsSend({
            phone: this.loginForm.phone,
            userName: this.loginForm.username
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('发送成功')
              this.loginForm.smsCodeC = res.data
            } else {
              this.$message.warning('发送失败')
            }
          })
        }
      })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      // 不获取本地安装信息，平时开发用
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(res => {
            // console.log(res)
            this.$store.dispatch('user/getInfo').then(res => {
              this.$router.push({ path: this.redirect || '/', query: {
                user: res
              }
              })
              this.loading = false
            })
          }).catch(() => {
            // console.log(this.redirect)
            this.loading = false
          })
        } else {
          return false
        }
      })
      // 获取本地安装信息
      // this.$get('http://localhost:9007/softinfo/', {
      //   cmd: 'login'
      // }).then(res => {
      //   if (res.data) {
      //     setMachineCode(res.data)
      //     this.$refs.loginForm.validate(valid => {
      //       if (valid) {
      //         if (this.loginForm.username == '') {
      //           this.$message.warning('请输入用户名')
      //         } else {
      //           this.loading = true
      //           this.$store.dispatch('user/login', this.loginForm).then(res => {
      //           // console.log(res)
      //             this.$store.dispatch('user/getInfo').then(res => {
      //               if (res.roleType == 1026) {
      //                 this.$router.push({ path: '/history/history', query: {
      //                   user: res
      //                 }
      //                 })
      //               } else {
      //                 this.$router.push({ path: '/', query: {
      //                   user: res
      //                 }
      //                 })
      //               }
      //               // /history/history
      //
      //               this.loading = false
      //             })
      //           }).catch(() => {
      //           // console.log(this.redirect)
      //             this.loading = false
      //           })
      //         }
      //       } else {
      //         return false
      //       }
      //     })
      //   }
      // }).catch(() => {
      //   if (this.loginForm.username === 'siwuxie') {
      //     setMachineCode('SAMSUNG MZNLN128HCGR-000L2_BFEBFBFF000506E3_08:D4:0C:5F:F6:90')
      //     this.$refs.loginForm.validate(valid => {
      //       if (valid) {
      //         this.loading = true
      //         this.$store.dispatch('user/login', this.loginForm).then(res => {
      //           // console.log(res)
      //           this.$store.dispatch('user/getInfo').then(res => {
      //             this.$router.push({ path: '/dashboard', query: {
      //               user: res
      //             }
      //             })
      //             this.loading = false
      //           })
      //         }).catch(() => {
      //           // console.log(this.redirect)
      //           this.loading = false
      //         })
      //       } else {
      //         return false
      //       }
      //     })
      //   } else {
      //     this.$confirm('登录系统前,必须下载辅助程序并运行!', '温馨提示', {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'info'
      //     }).then(() => {
      //     }).catch(() => {
      //       this.$message.info('已点击取消')
      //     })
      //   }
      //   // this.$message.warning('请先安装客户端启动后重试')
      // })

    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.el-button.is-circle{
  padding: 23px;
}
.login-container {
  .el-input {
    display: inline-block;
    height: 40px;
    // width: 325px;
    text-align: center;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      color: black;
      // padding: 12px 5px 12px 15px;
      // color: $light_gray;
      // height: 47px;
      // caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(51, 50, 50, 0.1);
    border-radius: 5px;
    // color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#666666;
.lager{
  height: 3em;
  width: 3em;
}
.login{
  .el-row{
    width: 100%;
    height: 100%;
  }
  .login-container-right {
    background-size: cover; -moz-background-size: cover;
    // width: 80%;
    height: 100%;
    background-image: url('../../assets/images/img_login_bg.png');
    .title-container {
      position: relative;

      .title {
        font-size: 20px;
        color: $light_gray;
        // margin: 38% 30%;
        text-align: center;
        // height: 60px;
        font-weight: bold;
      }
    }
  }
  .login-container-left{
    padding: 1px;
    height: 100%;
    background-image: url('../../assets/images/img_login_bg.png');
  }
  // min-height: 100%;
  // width: 100%;
  background-color: $bg;
  overflow: hidden;
  .login-container {
    .login-container1 {
      border-radius: 10px;
      width: 350px;
      height: 400px;
      margin: auto;
      margin-top: 10%;
      background-color: white;
    }
    .login-container2 {
      border-radius: 10px;
      text-align: left;
      width: 350px;
      height: 400px;
      margin: auto;
      margin-top: 10%;
      background-color: white;
    }
    .login-container3 {
      width: 350px;
      height: 300px;
      margin: auto;
      margin-top: 10%;
      background-color: white;
    }
    text-align: center;
  .login-form {
    position: relative;
    width: 380px;
    max-width: 100%;
    padding: 30px;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 20px;
      color: $light_gray;
      margin: 10px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .el-input__prefix {
    width: 20px;
    // padding-top: 4px;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
}

</style>
